<template>
  <div class="weixinAuthStep">
    <div class="header">
      <img src="../../../../../assets/img/weChatAuthStep1.png" v-if="currentStep === 'step1'">
      <img src="../../../../../assets/img/weChatAuthStep2.png" v-if="currentStep === 'step2'">
      <img src="../../../../../assets/img/weChatAuthStep3.png" v-if="currentStep === 'step3'">
    </div>
    <div class="content">
      <weixin-auth-step1 v-if="currentStep === 'step1'" @error="step1error" @success="step1done" @preStep="step2Pre"></weixin-auth-step1>
      <weixin-auth-info v-if="currentStep === 'step2'" :weixindata="newWeixin" type="add" @saveDone="step2done" @preStep="step2Pre"></weixin-auth-info>
      <wechat-auth-edit v-if="currentStep === 'step3'" :weixindata="newWeixin" type="add" @preStep="step2Pre"></wechat-auth-edit>
    </div>
  </div>
</template>

<script>
  import weixinAuthStep1 from './wechatAuthStep1.vue'
  import weixinAuthInfo from './wechatAuthInfo.vue'
  import wechatAuthEdit from './wechatAuthEdit.vue'
  export default {
    name: 'wechatAuthStep',
    data () {
      return {
        currentStep: 'step1',
        preweixinList: '',
        newWeixin: ''
      }
    },
    methods: {
      step1error () {
        this.$emit('reset')
      },
      step1done () {
        // 通过扫码前后数组对比，判断是否是新增的微信号 还是已有的微信号
        this.$store.dispatch('queryWeChatAuthorizationList', {}).then((resp) => {
          if (resp.success) {
            let list = resp.list
            if (list.length === this.preweixinList.length) {
              // 扫码的公众号已存在列表内
              this.$message.warning(this.$t('configLazyLoad.channel.wexinTip113'))
              this.$emit('reset')
            } else {
              console.log(resp.list)
              let preArray = []
              this.preweixinList.forEach((item) => {
                preArray.push(item._id)
              })
              let newWeixin = resp.list.filter((item) => {
                return preArray.indexOf(item._id) === -1
              })
              console.log(newWeixin)
              this.newWeixin = newWeixin[0]
              this.currentStep = 'step2'
            }
          }
        })
      },
      step2done () {
        console.log('step2SaveDone')
        this.currentStep = 'step3'
      },
      step2Pre () {
        console.log('pre')
        this.$emit('reset')
      }
    },
    beforeMount () {
      this.$store.dispatch('queryWeChatAuthorizationList', {}).then((resp) => {
        if (resp.success) {
          this.preweixinList = resp.list
        }
      })
    },
    components: {
      weixinAuthStep1,
      weixinAuthInfo,
      wechatAuthEdit
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .weixinAuthStep
    text-align center
    height: calc(100vh - 170px);
    overflow-y: auto;
    .header
      margin:10px
      img
        width 720px
  /* 新版设置中微信绑定页高度需要变化 */
  .new-config
    .weixinAuthStep
      height: calc(100vh - 54px);
</style>
